<template>
    <div class="content" >
      <div class="carousel">
        <el-carousel trigger="click" height="500px">
          <el-carousel-item v-for="(item,index) in imgList" :key="index" >
            <img v-bind:src="item.url" width=100% height="500px">
          </el-carousel-item>
        </el-carousel>
      </div>

        <div class="other">
          <p>  {{word}}</p>
          <p>  {{word}}</p>
          <p>  {{word}}</p>
        </div>


    </div>
</template>

<script>
    export default {
        name: "content1",
      data(){
          return{
            imgList:[
              {url: require('../../assets/project1.jpg') },
              {url: require('../../assets/project2.jpg')},
              {url: require('../../assets/project3.jpg')},
            ],
            word:' I remember quite clearly now when the story happened. The autumn leaves were floating in measure down to the ground, recovering the lake, where we used to swim like children, under the sun was there to shine. That time we used to be happy. Well, I thought we were. But the truth was that you had been longing to leave me, not daring to tell me. On that precious night, watching the lake, vaguely conscious, you said: Our story is ending.\n' +
            '\n' +
            '            The rain was killing the last days of summer, you had been killing my last breath of love since along time ago. I still don\'t think I\'m gonna make it through another love story. You took it all away from me. And there I stand, I knew I was going to be the one left behind. But still I\'m watching the lake, vaguely Conscious, and I know my life is ending. \n' +
            '         '
          }
      },

    }
</script>

<style scoped>
  .content{
    position: absolute;
    width: 100%;
    background-color: red;
      top: 64px;
        left: 0;
      padding: 0;
      height: auto;
/*overflow: auto;*/
  }
.content .carousel{
    left: 0;
    top: 64px;
}
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;

  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
.content .other{
    /*position: relative;*/
    /*width: 100%;*/
    /*height: 500px;*/
}
</style>
